<!-- TwoSee.vue -->
<template>
  <custom-layout custom-class="custom-layout">
    <wd-notice-bar :text="`备注：${twoSee.remark}`" type="info" prefix="warn-bold"   v-if="twoSee.remark" wrapable :scrollable="false" />

    <wd-collapse v-model="value" class="list" v-if="twoSee.fileUrls.length>0">
      <wd-collapse-item
        v-for="(file, index) in twoSee.fileUrls"
        :key="index"
        :title="getListItemMeta(index, file.createTime)"
        :name="`TwoSee${index}`"
      >
        <view class="file-container">
          <template v-for="(file2, index2) in file.fileUrl" :key="index2">
            <file-preview :file="file2"  />
          </template>
        </view>
      </wd-collapse-item>
    </wd-collapse>
    <!-- 空状态 -->
	  <wd-status-tip v-else image="search" tip="暂无数据" />
      <!-- 粘性审批对话框 -->
     <stick-approve-dialog :order-id="props.orderId" approve-type="14" ref="stickyApproveDialogRef14"/>
  </custom-layout>
</template>

<script setup>
import dayjs from 'dayjs';  
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import {
  useDictionaryStore,
  useUserStore
} from '@/store/index.js'
import { orderMessageList, getDesignInfoList } from '@/api/order/detail.js'
import FilePreview from '@/packageA/components/file-preview/file-preview.vue';
import stickApproveDialog from '@/packageA/components/stick-approve-dialog/stick-approve-dialog.vue';

const props = defineProps({
  orderId: {
    type: Number,
    required: true
  },
  approveType: {
    type: String,
  }
});
// // 组件注册
// defineOptions({
//   components: {
//     FilePreview
//   }
// });
const dictionaryStore = useDictionaryStore()
const userStore = useUserStore()
// 二见信息列表
const twoSeeList = ref([]);
// 二见信息
const twoSee = reactive({
  remark: '',
  result: null,
  fileUrls: [],
});
 
const value = ref(['planInfo1'])

const getListItemMeta = (index, uploadTime) => {
  return `第${index + 1}上传,上传时间为${dayjs(uploadTime).format('YYYY-MM-DD HH:mm:ss')}`;
};

// 处理获取二见信息列表
const handleGettwoSeeList = () => {
  uni.showLoading({
			mask: true
		})
  const params = {
    orderId: props.orderId,
    logType: 'twoSee',
  };
  getDesignInfoList(params)
    .then((data) => {
      if (!data) return;
	  twoSeeList.value = data.fileUrls;
      twoSee.remark = data.remark;
      twoSee.result = data.result;
      twoSee.fileUrls = data.fileUrls;
    }).catch((error) => {
      uni.showToast({
        title: error,
        icon: 'error'
      })
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const stickyApproveDialogRef14 = ref(null)
onMounted(() => {
  handleGettwoSeeList();
  stickyApproveDialogRef14.value.open();
});
</script>

<style lang="scss" scoped>
.custom-layout {
  height: calc(100vh - 300px);
}
.file-container {
	display: flex;
	flex-wrap: wrap;
  gap: 16px;
}
</style>